<template>
  <v-layout type="main">
    <!-- <p class="page-title">模型应用</p> -->
    <div class="clearfix">
      <div class="search-box">
        <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="请输入内容"
          @input="getData" />
        <a href="javascript:;" class="add el-icon-plus" @click="$router.push({ path: '/edge/detail' })">新增</a>
      </div>
    </div>
    <el-table :data="tableData" row-key="id">
      <el-table-column type="expand">
        <template slot-scope="{row}">
          <div class="sub-table">
            <div v-for="item in row.ls_edge_pod" :key="item.id" class="sub-table-item">
              <span>ID: {{ item.id }}</span>
              <span>pod名称: {{ item.pod_name }}</span>
              <span>状态: {{ item.status }}</span>
              <span>部署节点ip: {{ item.ip }}</span>
              <span>端口号: {{ item.port }}</span>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="服务名称">
        <template slot-scope="{ row }">
          <el-button type="text" @click="$router.push({ path: '/edge/code', query: { id: row.id } })" slot="reference">
            {{ row.name }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="service_name" label="部署名称" />
      <el-table-column prop="create_user.nick_name" label="创建人">
        <template>
          admin
        </template>
      </el-table-column>
      <el-table-column prop="update_time" label="更新时间" />
      <el-table-column label="运行时长">
        <template slot-scope="{ row }">
          {{ countRanTime(row.resource && row.resource.start_time) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" slot="reference" @click="start(row.id)"
            v-if="row.status.toLocaleLowerCase() === 'running'">
            重新部署
          </el-button>
          <el-button type="text" slot="reference" @click="start(row.id)" v-else>
            启动
          </el-button>
          <el-popover placement="top" width="80" trigger="click" v-model="row.visible">
            <p>您确定要删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="del(row)">确定</el-button>
            </div>
            <el-button type="text" slot="reference" style="margin-left: 15px">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box" v-if="Pagedata.total > Pagedata.pageSize">
      <el-pagination background class="pagination" layout="total, prev, pager, next, jumper"
        :page-size="Pagedata.pageSize" :current-page.sync="Pagedata.pageNum" @current-change="handleCurrentChange"
        :total="Pagedata.total">
      </el-pagination>
    </div>
  </v-layout>
</template>

<script>
import { getDeploys, delDeploy, startServing } from '@/api/edgeDeploy'
import { isStringifyJSON } from '@/utils/tool'
import { bus } from '@/main'
export default {
  data() {
    return {
      showThisActive: 1,
      tableData: [],
      Pagedata: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      dagMsg: null,
    };
  },
  async created() {
    this.getData()

    bus.$on('edge', e => {
      console.log('edge消息--->', e)
      this.getData()
    })

    let res = await this.$myInfo(this)
    if (res && res.id) {
      this.dagMsg = new this.$ws({ url: `cloud/ws/admin/${res.id}` })
      this.dagMsg.initWebSocket(this.msgFn)
    }
  },
  methods: {
    async getData() {
      let res = await getDeploys({ ...this.Pagedata })
      this.tableData = res.data
      this.Pagedata.total = res.total
    },
    async start(id) {
      const res = await startServing(id)
      console.log("start: ", res)
      this.getData()
    },
    async del(row) {
      // let res = await this.$isDel();
      // if (res) {
      await delDeploy(row)
      this.getData()
      // }

    },
    handleCurrentChange(val) {
      this.Pagedata.current = val
      this.getData()
    },
    msgFn(e) {
      if (isStringifyJSON(e.data)) {
        let msg = JSON.parse(e.data)
        console.log(msg)
        if (msg.type == 'edge') {
          this.getData()
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.sub-table {
  .sub-table-item {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    display: flex;
    justify-content: space-around;

    span {
      width: 100%;
    }
  }
}
</style>